<template>
    <div class="weather  row ">
        <div class="col-lg-3 col-md-6 col-sm-12">
            <div class="card">
                <div class="card-body" style="min-height:250px">
                    <h4 class="card-title">天气预报</h4>
                    <hr >
                    <div class="d-flex align-items-center flex-row m-t-30" style="margin-top:15px">
                        <div class="weather-imgs">
                            <img :src="weatherImg" >
                        </div>
                        <div class="p-2 display-5 text-info temperature-div">
                            <i class="wi wi-rain-mix"/>
                            <span id="clnid">{{ low }}</span> ~ <span id="hotid">{{ high }}</span>
                        </div>
                        <div class="p-2" style="margin-left:50px">
                            <div class="week" id="dataid" style="">{{ day }}</div>
                            <small style="margin-left:10px">
                                <select id="skycityid" class="select pull-right weatherSelect" style="" v-model="cityID" @change="getSelected">
                                    <option v-for="(item,i) in selectCitys" :key="i" :value="item.id">{{ item.city }}</option>
                                </select>
                            </small>
                        </div>
                    </div>

                    <table class="tabletest">
                        <tbody>
                            <tr>
                                <td>风速</td>
                                <td id="windid" class="font-medium">{{ speed }}</td>
                            </tr>
                            <!-- API里面没有湿度 -->
                            <!-- <tr>
									<td>湿度</td>
									<td id="waterid" class="font-medium">98%</td>
								</tr> -->
                            <tr>
                                <td>风向</td>
                                <td id="windleid" class="font-medium">{{ fengxiang }}</td>
                            </tr>
                            <tr>
                                <td>天气</td>
                                <td id="timeid" class="font-medium">{{ type }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// 天气接口
// http://www.weather.com.cn/data/sk/101010100.html  (这个接口有点故障)
// http://www.weather.com.cn/data/cityinfo/101010100.html (http请求不到)
// http://wthrcdn.etouch.cn/weather_mini?citykey=101220101 (可以请求,中华万年历)
// 使用需要安装npm install jsonp --save，因为axios不支援jsonp
import jsonp from 'jsonp'

export default {
    data() {
        return {
            selectCitys: [{ 'city': '合肥', 'id': '101220101' },
                { 'city': '上海', 'id': '101020100' },
                { 'city': '厦门', 'id': '101230201' },
                { 'city': '嘉兴', 'id': '101210101' },
                { 'city': '黄山', 'id': '101221008' },
                { 'city': '亳州', 'id': '101220901' },
                { 'city': '洛川', 'id': '101110309' },
                { 'city': '巴中', 'id': '101270901' }
            ],
            cityID: '101220101',
            day: '',
            low: '',
            high: '',
            speed: '',
            fengxiang: '',
            type: '',
            weatherImgUrl: [
                { 'code': 100, 'wt': '晴' },
                { 'code': 101, 'wt': '多云' },
                { 'code': 102, 'wt': '少云' },
                { 'code': 103, 'wt': '晴间多云' },
                { 'code': 104, 'wt': '阴' },
                { 'code': 200, 'wt': '有风' },
                { 'code': 201, 'wt': '平静' },
                { 'code': 202, 'wt': '微风' },
                { 'code': 203, 'wt': '和风' },
                { 'code': 204, 'wt': '清风' },
                { 'code': 205, 'wt': '强风/劲风' },
                { 'code': 206, 'wt': '疾风' },
                { 'code': 207, 'wt': '大风' },
                { 'code': 208, 'wt': '烈风' },
                { 'code': 209, 'wt': '风暴' },
                { 'code': 210, 'wt': '狂爆风' },
                { 'code': 211, 'wt': '飓风' },
                { 'code': 212, 'wt': '龙卷风' },
                { 'code': 213, 'wt': '热带风暴' },
                { 'code': 300, 'wt': '阵雨' },
                { 'code': 301, 'wt': '强阵雨' },
                { 'code': 302, 'wt': '雷阵雨' },
                { 'code': 303, 'wt': '强雷阵雨' },
                { 'code': 304, 'wt': '雷阵雨伴有冰雹' },
                { 'code': 305, 'wt': '小雨' },
                { 'code': 306, 'wt': '中雨' },
                { 'code': 307, 'wt': '大雨' },
                { 'code': 308, 'wt': '极端降雨' },
                { 'code': 309, 'wt': '毛毛雨/细雨' },
                { 'code': 310, 'wt': '暴雨' },
                { 'code': 311, 'wt': '大暴雨' },
                { 'code': 312, 'wt': '特大暴雨' },
                { 'code': 313, 'wt': '冻雨' },
                { 'code': 314, 'wt': '小到中雨' },
                { 'code': 315, 'wt': '中到大雨 ' },
                { 'code': 316, 'wt': '大到暴雨' },
                { 'code': 317, 'wt': '暴雨到大暴雨' },
                { 'code': 318, 'wt': '大暴雨到特大暴雨' },
                { 'code': 399, 'wt': '雨' },
                { 'code': 400, 'wt': '小雪' },
                { 'code': 401, 'wt': '中雪' },
                { 'code': 402, 'wt': '大雪' },
                { 'code': 403, 'wt': '暴雪' },
                { 'code': 404, 'wt': '雨夹雪' },
                { 'code': 405, 'wt': '雨雪天气' },
                { 'code': 406, 'wt': '阵雨夹雪' },
                { 'code': 407, 'wt': '阵雪' },
                { 'code': 408, 'wt': '小到中雪' },
                { 'code': 409, 'wt': '中到大雪 ' },
                { 'code': 410, 'wt': '大到暴雪 ' },
                { 'code': 499, 'wt': '雪' },
                { 'code': 500, 'wt': '薄雾' },
                { 'code': 501, 'wt': '雾' },
                { 'code': 503, 'wt': '扬沙' },
                { 'code': 504, 'wt': '浮尘' },
                { 'code': 507, 'wt': '沙尘暴' },
                { 'code': 508, 'wt': '强沙尘暴' },
                { 'code': 509, 'wt': '浓雾' },
                { 'code': 510, 'wt': '强浓雾' },
                { 'code': 511, 'wt': '中度霾' },
                { 'code': 512, 'wt': '重度霾' },
                { 'code': 513, 'wt': '严重霾' },
                { 'code': 514, 'wt': '大雾' },
                { 'code': 515, 'wt': '特强浓雾' },
                { 'code': 900, 'wt': '热' },
                { 'code': 901, 'wt': '冷' },
                { 'code': 999, 'wt': '未知' }
            ],
            weatherImg: ''
        }
    },
    mounted() {
        //  默认为合肥
        jsonp('http://wthrcdn.etouch.cn/weather_mini?citykey=101220101', null, (err, data) => {
            if (err) {
                console.error(err.message)
            } else {
                var obj = data.data.forecast[0]
                var ndate = obj.date
                var nlow = obj.low
                var nhigh = obj.high
                var nspeed = obj.fengli
                nspeed = nspeed.substring(0, nspeed.length - 3)
                var nnspeed = nspeed.slice(9)
                var nfengxiang = obj.fengxiang
                var ntype = obj.type

                this.day = ndate.slice(3)
                this.low = nlow.slice(2)
                this.high = nhigh.slice(2)
                this.speed = nnspeed

                this.fengxiang = nfengxiang
                this.type = ntype

                var number = ''
                for (var i = 0; i < this.weatherImgUrl.length; i++) {
                    if (this.weatherImgUrl[i].wt == ntype) {
                        number = this.weatherImgUrl[i].code
                    }
                }

                this.weatherImg = 'https://cdn.heweather.com/cond_icon/' + number + '.png'
            }
        })
    },
    methods: {
        getSelected: function() {
        // alert(e.target.value);
            var cid = this.cityID
            console.log(cid)
            jsonp('http://wthrcdn.etouch.cn/weather_mini?citykey=' + cid, null, (err, data) => {
                if (err) {
                    console.error(err.message)
                } else {
                    var obj = data.data.forecast[0]
                    var ndate = obj.date
                    var nlow = obj.low
                    var nhigh = obj.high
                    var nspeed = obj.fengli
                    nspeed = nspeed.substring(0, nspeed.length - 3)
                    var nnspeed = nspeed.slice(9)
                    var nfengxiang = obj.fengxiang
                    var ntype = obj.type

                    this.day = ndate.slice(3)
                    this.low = nlow.slice(2)
                    this.high = nhigh.slice(2)
                    this.speed = nnspeed

                    this.fengxiang = nfengxiang
                    this.type = ntype

                    var number2 = ''
                    for (var j = 0; j < this.weatherImgUrl.length; j++) {
                        if (this.weatherImgUrl[j].wt == ntype) {
                            number2 = this.weatherImgUrl[j].code
                        }
                    }

                    this.weatherImg = 'https://cdn.heweather.com/cond_icon/' + number2 + '.png'
                }
            })
        }

    }

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h4{
    padding:8px;
    font-size:20px;
}
.weather{
  min-height:250px;

  border-radius: 10px;
}

.card{
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 0 solid transparent;
    border-radius: 0;
    padding:5px

}
.card-body{
    padding:5px
}
.tabletest{
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
    white-space: normal;
    line-height: normal;
    font-weight: normal;
    font-size: medium;
    font-style: normal;
    color: -internal-quirk-inherit;
    text-align: start;
    font-variant: normal;
    display: table;

}

.tabletest{
  font-size: 16px;
  color:#6c757d
}

.weather-imgs{
    position:relative;
    float:left;
    width:60px;
    height:60px;
    margin-bottom:15px;
    margin-right:15px
}

.weather-imgs img{
     width:60px;
     height:60px
}

.temperature-div{
     position:relative;
     width:100%
}

.temperature-div span{
      font-size:25px;
      margin-top:15px
 }
.week{
     position:relative;
     float:left;
     font-size:16px;
     margin-top:5px
}

.weatherSelect{
     width:100px;
     border:1px solid #fff
}

</style>
